<template>
	<my-privilege title="我的特权">
		<view class="whole" v-for="(item, index) in condition" :key="index">
			<navigator :url="item.link" hover-class="none" class="nav flex">
				<image :src="item.imgages"></image>
				<view class="flex-sub">
					<view>{{item.name}}</view>
					<view class="color text-cut">{{item.condition}}</view>
				</view>
			</navigator>
		</view>		
	</my-privilege>
</template>

<script>
	import MyPrivilege from './components/privilege'
	import { myPrivilege } from '@/common/api/users'
	export default {
		name: 'myprivilege',
		components: { MyPrivilege },
		data() {
			return {
				list: {},
				condition: [],
				ptype: 0
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList() {
				uni.showLoading()
				myPrivilege().then(res => {	
					uni.hideLoading()
					if (!res.code) {
						if (res.msg) {
							uni.showModal({
								content: res.msg,
								showCancel: false,
								success: () => {
									uni.navigateBack()
								}
							})
							return
						}
						this.$store.commit('SET_RANK', res.data.card)
						res.data.condition.forEach(item => {
							item.link = `/usercenter/grade?type=${item.ptype || 3}`
						})
						this.condition = res.data.condition
					}
				})
			}
		}
	}
</script>

<style lang="less">
@import '../common/styles/variables.less';
.fixedBody;
.whole {
	display: flex;
	flex-flow: column;
	flex-direction: column;
	&:not(:last-of-type) {
		.border-bottom(15upx);
	}		
	.arrowRight(#666, 0, 15upx);
	&::before {
		z-index: 99;
	}
	& > .nav {
		background: white;
		position: relative;
		padding: 15upx;
		& > image {
			width: 50upx;
			height: 50upx;
			float: left;
		}
		& > view {
			overflow: hidden;
			margin-left: 20upx;
			margin-right: 35upx;
			font-size: @title;
			& > .color {
				color: #ccc;
				font-size: @minSize;
			}
		}
	}
}
</style>
